@media screen and (max-width: 768px) {
    .board-container{
        width: 100%;
        padding: 10px 4vw;
        box-sizing: border-box;
    }
    .date-list {
        width: 100%;
        height: 60px;
        border: 1px solid #00a2f0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
      }
      .date-item{
          width: 33.33%;
        color: #0ecee7;
        font-size: 1.2em;
      }
    .header-content{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 10px 0 0 0;
    }
    .header-left{
        width: 100%;
        height: 80px;
        background: url('../img/top_left.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .header-left .logo{
        width: 40px;
        height: 40px;
    }
    .header-left .logo>img{
        width: 100%;
        height: 100%;
    }
    .header-left-content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .header-left .title{
        color: #0ecee7;
        font-size: 1.55em;
    }
    .header-left .time{
        color: #0ecee7;
        font-size: 1.125em;
    }
    .header-left .company{
        color: #0ecee7;
        font-size: 0.8em;
    }
    .header-middle{
        width: 47%;
        height: 60px;
        margin: 10px 0;
        background: url('../img/top_middle.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 1em;
    }
    .header-middle .number{
        font-size: 1.5em;
    }
    .header-right{
        width: 100%;
        height: 80px;
        background: url('../img/top_right.png') no-repeat;
        background-size: 100% 100%;
    }
    .plot-ratio{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .plot-ratio .title{
        font-size: 1.5em;
    }
    .plot-ratio .number{
        font-size: 1em;
        color: #28f000;
    }
    .right-chart{
        width: 100%;
        height: 50%;
        padding: 0 5%;
        display: flex;
        align-items: center;
        color: #1699e5;
        box-sizing: border-box;
    }
    .chart-content{
        width: 100%;
        display: flex;
        /* flex-direction: column; */
        flex-direction: column-reverse;
        justify-content: space-between;
        margin: 2.083vw 0 0 0;
    }
    .chart-content .left-box{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .chart-content .right-box{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .left-box .pie-chart{
        width: 100%;
        /* background: url('../img/bg_1.png') no-repeat;
        background-size: 100% 100%; */
    }
    .left-box .pie-chart>div{
        width: 100%;
        height: 300px;
        background: url('../img/bg_1.png') no-repeat;
        background-size: 100% 100%;
        margin: 10px 0 0 0;
    }
    .left-box .map-chart{
        width: 100%;
    }
    .left-box .map-chart>div{
        width: 100%;
        height: 300px;
        background: url('../img/bg_2.png') no-repeat;
        background-size: 100% 100%;
        margin: 10px 0 0 0;
    }
    .right-box{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .right-box .top-chart{
        width: 100%;
        height: 250px;
        margin: 10px 0 0 0;
        background: url('../img/bg_3.png') no-repeat;
        background-size: 100% 100%;
    }
    .right-box .bottom-chart{
        width: 100%;
        height: 250px;
        margin: 10px 0 0 0;
        background: url('../img/bg_4.png') no-repeat;
        background-size: 100% 100%;
    }
    .footer-content{
        width: 100%;
        display: flex;
    }
    .chart-box{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .chart-box .chart-info{
        width: 100%;
        height: auto;
        margin: 0 0 1vw 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .chart-box .chart-item{
        width: 100%;
        height: 60vw;
        margin: 2vw 0;
        background: url('../img/bg_2.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chart-info .info-box{
        width: 100%;
        height: 20vw;
        background: url('../img/top_left.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 0 2.4vw 0;
    }
    .chart-info .data-box{
        width: 47%;
        height: 15vw;
        background: url('../img/top_middle.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 0 2.4vw 0;
    }
    .data-box .box-title{
        width: 100%;        
        font-size: 1em;
        color: #0ecee7;
    }
    .data-box .box-value{
        width: 100%;
        font-size: 1.1em;
        margin: 0.5vw 0 0 0;
        color: #fff;
    }
    .theme-title{
        width: 100%;
        font-size: 1.1em;
        color: #0ecee7;
        white-space: nowrap;
    }
    .info-box .logo{
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 10px 0 0;
    }
    .info-box .logo>img{
        width: 100%;
        height: 100%;
    }
    .info-box .company{
        width: 100%;
        display: flex;
        font-size: 1em;
        color: #0ecee7;
        justify-content: center;
        align-items: center;
    }
    .box-value .el-date-editor.el-input{
        width: 100%;
        background: inherit;
        display: flex;
        justify-content: center;
    }
    .box-value .el-input--suffix .el-input__inner{
        padding: 0;
        border: 0;
        height: auto;
        background: transparent;
        font-size: 1.1em;
        line-height: normal;
        color: #fff;
        text-align: center;
    }
}
/* pc */
@media screen and (min-width:768px){
    .board-container{
        width: 100%;
        padding: 1vw 2.1vw;
        box-sizing: border-box;
    }
    .date-list {
        width: 100%;
        height: 4vw;
        border: 1px solid #00a2f0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
      }
      .date-item{
        color: #0ecee7;
          font-size: 1.2em;
      }
    .header-content{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 1.083vw 0 0 0;
    }
    .header-left{
        width: 16.927vw;
        height: 5.729vw;
        background: url('../img/top_left.png') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .header-left .logo{
        width: 2vw;
        height: 2vw;
    }
    .header-left .logo>img{
        width: 100%;
        height: 100%;
    }
    .header-left-content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .header-left .title{
        color: #0ecee7;
        font-size: 1.55em;
    }
    .header-left .time{
        color: #0ecee7;
        font-size: 1.125em;
    }
    .header-left .company{
        color: #0ecee7;
        font-size: 0.8em;
    }
    .header-middle{
        width: 12.761vw;
        height: 5.729vw;
        background: url('../img/top_middle.png') no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 1.2em;
    }
    .header-middle .number{
        font-size: 1.8em;
    }
    .header-right{
        width: 18.073vw;
        height: 5.729vw;
        background: url('../img/top_right.png') no-repeat;
        background-size: cover;
    }
    .plot-ratio{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .plot-ratio .title{
        font-size: 1.5em;
    }
    .plot-ratio .number{
        font-size: 1em;
        color: #28f000;
    }
    .right-chart{
        width: 100%;
        height: 50%;
        padding: 0 5px;
        display: flex;
        align-items: center;
        color: #1699e5;
        box-sizing: border-box;
    }
    .chart-content{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 2.083vw 0 0 0;
    }
    .chart-content .left-box{
        width: 48.646vw;
        display: flex;
        flex-direction: column;
    }
    .chart-content .right-box{
        width: 45.104vw;
        display: flex;
        flex-direction: column;
    }
    .left-box .pie-chart{
        width: 48.646vw;
        height: 19.531vw;
        background: url('../img/bg_1.png') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .left-box .pie-chart>div,
    .left-box .map-chart>div{
        width: 50%;
        height: 100%;
      }
    .left-box .map-chart{
        width: 48.646vw;
        height: 24.427vw;
        margin: 2.083vw 0 0 0;
        background: url('../img/bg_2.png') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .right-box .top-chart{
        width: 45.104vw;
        height: 23.229vw;
        background: url('../img/bg_3.png') no-repeat;
        background-size: cover;
    }
    .right-box .bottom-chart{
        width: 45.104vw;
        height: 21.25vw;
        margin: 1.562vw 0 0 0;
        background: url('../img/bg_4.png') no-repeat;
        background-size: cover;
    }
    .footer-content{
        width: 100%;
        display: flex;
    }
    .chart-box{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .chart-box .chart-info{
        width: 47.4vw;
        height: 23.802vw;
        margin: 0 0 1vw 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .chart-box .chart-item{
        width: 47.4vw;
        height: 23.802vw;
        margin: 0 0 1vw 0;
        background: url('../img/bg_2.png') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chart-info .info-box{
        width: 65%;
        height: 5.5vw;
        background: url('../img/top_left.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 0 2.4vw 0;
    }
    .chart-info .data-box{
        width: 30%;
        height: 5.5vw;
        background: url('../img/top_middle.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 0 2.4vw 0;
    }
    .data-box .box-title{
        width: 100%;        
        font-size: 1.32em;
        color: #0ecee7;
    }
    .data-box .box-value{
        width: 100%;
        font-size: 1.52em;
        line-height: 2vw;
        margin: 0.5vw 0 0 0;
        color: #fff;
    }
    .theme-title{
        width: 100%;
        height: 3vw;
        line-height: 3vw;
        font-size: 1.32em;
        color: #0ecee7;
        white-space: nowrap;
    }
    .info-box .logo{
        width: 2vw;
        height: 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px 0 0;
    }
    .info-box .logo>img{
        width: 100%;
        height: 100%;
    }
    .info-box .company{
        width: 100%;
        height: 2.5vw;
        display: flex;
        font-size: 1.1em;
        color: #0ecee7;
        justify-content: center;
        align-items: center;
    }
    .box-value .el-date-editor.el-input{
        width: 100%;
        background: inherit;
        display: flex;
        justify-content: center;
    }
    .box-value .el-input--suffix .el-input__inner{
        padding: 0;
        border: 0;
        height: 2vw;
        background: transparent;
        font-size: 1.52em;
        line-height: 2vw;
        color: #fff;
        text-align: center;
    }
}